<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>事件修饰符</title>
        <style>
            * {
                margin-top: 20px;
            }

            .box {
                width: 300px;
                height: 100px;
                background-color: skyblue;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <!-- TODO:prevent修饰符 -->
            <form action="http://www.baidu.com">
                <button @click.prevent="vueEvent">实现跳转</button>
            </form>
            <!-- TODO:stop修饰符 -->
            <div
            @click="modifierEvent"
            style="width: 100px; height:100px;background: pink"
            >
               <button @click.stop="modifierEvent1">点击</button>  
            </div>
            <!-- TODO:once修饰符 -->
            <button @click.once = "vueEvent">一次点击</button>
            <!-- TODO:修饰符的串联 -->
            <form action="http://www.baidu.com" @click="modifierEvent">
                <button @click.stop.prevent.once="modifierEvent1">点击</button>
            </form>
        </div>

        <script>
            let vm = new Vue({
                el: '#root',
                methods: {
                    vueEvent(){
                        console.log(event);
                    },
                    modifierEvent(){
                        console.log('modifierEvent')
                    },
                    modifierEvent1(){
                        console.log('modifierEvent1')
                    },
                },
            });
        </script>
    </body>
</html>
